<html>
    <head>
        <meta charset='UTF-8' />
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
        <title>班长工具</title>
        <style>
            body {
                max-width: 800px;
                margin: 0 auto;
                background: #f5f5f5;
            }
            #app{
                padding: 10px 20px;
            }
            .result{
                margin-top: 10px;
                padding: 10px ;
                background: #fff;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <cube-form
                :model="model"
                :schema="schema"
                :immediate-validate="false"
                :options="options"
                @submit="submitHandler"></cube-form>
            <div class="result" v-if="trenchProportion">
                <div style="color: red;margin-bottom:10px" v-if="trenchProportion > 10">沟占比计算结果：{{trenchProportion}}%</div>
                <div style="color: green;margin-bottom:5px" v-else>沟占比计算结果：{{trenchProportion}}%</div>
                <div v-if="trenchProportion > 10" style="font-size: 12px;color: #999;">（注：当前以超过10%，请重新设计,或者在不超标的情况下修改沟宽为<span style="font-size: 18px;color: red;"> xx </span>m即可）</div>
                <div v-else style="font-size: 12px;color: #999;">（注：当前未超过10%）</div>
                
            </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                data(){
                    return {
                        model: {
                            widths: '',
                            heights: '',
                            trenchWidths: '',
                        },
                        trenchProportion: 0,
                        options: {
                            scrollToInvalidField: true,
                            layout: 'standard' // classic fresh
                        },
                        schema:{
                            fields:[{
                                type: 'input',
                                modelKey: 'widths',
                                label: '宽度',
                                props: {
                                    placeholder: '请输入田宽（m）'
                                },
                                rules: {
                                    required: true,
                                    type: 'number',
                                    custom: (val) => {
                                        return val > 0
                                    }
                                },
                                messages: {
                                    required: '请输入田宽',
                                    custom: '请输入大于0的数字',
                                }
                            },{
                                type: 'input',
                                modelKey: 'heights',
                                label: '长度',
                                props: {
                                    placeholder: '请输入长度（m）'
                                },
                                rules: {
                                    required: true,
                                    type: 'number',
                                    custom: (val) => {
                                        return val > 0
                                    }
                                },
                                messages: {
                                    required: '请输入长度',
                                    custom: '请输入大于0的数字',
                                }
                            },{
                                type: 'input',
                                modelKey: 'trenchWidths',
                                label: '沟宽',
                                props: {
                                    placeholder: '请输入沟宽（m）',
                                },
                                rules: {
                                    required: true,
                                    type: 'number',
                                    custom: (val) => {
                                        return val > 0
                                    }
                                },
                                messages: {
                                    required: '请输入沟宽',
                                    custom: '请输入大于0的数字',
                                }
                            },{
                                type: 'submit',
                                label: '计算沟占比'
                            }]
                            
                        }
                    }
                },
                methods:{
                    submitHandler(e) {
                        e.preventDefault()
                        let a_ = parseFloat((this.model.heights / this.model.widths).toFixed(5));
                        let s_ = parseFloat((this.model.heights * this.model.widths).toFixed(5));
                        let __q = 2 * this.model.trenchWidths * (a_ + 1);
                        let __r = parseFloat(Math.sqrt(s_ * a_).toFixed(5))
                        let __w = parseFloat((4 * this.model.trenchWidths * this.model.trenchWidths).toFixed(5))
                        let __p = parseFloat((__q / __r).toFixed(5))
                        let __l = parseFloat((__w / s_).toFixed(5))
                        this.trenchProportion = ((__p - __l)*100).toFixed(1)
                        // debugger
                    },
                }
            });
        </script>
    </body>
</html>